// import AmapUtils from './dist/index.es.js'
import AmapUtils from './dist/index.es.js'

const amapUtils = new AmapUtils({
    key: "599dfe6bbe92b35d34d4e3d3f40aac6b",             // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
        'AMap.MouseTool',
        'AMap.PolygonEditor',
        'AMap.CircleEditor',
    ],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 版本
        "plugins": [
            'misc/PositionPicker' // 移动端拖拽选址
        ],       // 需要加载的 AMapUI ui插件
    },
});

console.log(amapUtils)


const editors = {
    polygon: null,
    circle: null
}


const init = async () => {
    const map = await amapUtils.initMap('map', {
        // center: [116.397428, 39.90923],
        // zooms: [4, 18],//设置地图级别范围
        zoom: 13
    });


    // 初始化渲染
    const defaultRender = () => {
        const vec = amapUtils.createVector('polygon', {
            path: [
                [116.403322, 39.920255],
                [116.410703, 39.897555],
                [116.402292, 39.892353],
                [116.389846, 39.891365]
            ],
        })
        editors.polygon = amapUtils.createVectorEditor('polygon', vec)
    }
    // defaultRender();

    let com;
    let railUtils;

    const getSelectVal = () => {
        const selects = document.querySelector('#selects')
        return selects.options[selects.selectedIndex].value
    }
    document.querySelector('#draw').addEventListener('click', async () => {

        const type = getSelectVal()

        if (editors[type]) return;

        railUtils = await amapUtils.drawVector(type, {
            polygonOpts: {
                fillColor: '#00b0ff',
                strokeColor: '#80d8ff'
            },
            markerOpts: {
                icon: "//webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
            },
            onFinish({ editor, type }) {
                // debugger;
                editors[type] = editor;
            }
        })

    })

    document.querySelector('#save').addEventListener('click', () => {
        Object.keys(editors).forEach(key => {
            let type = getSelectVal()
            if (editors[key]) {
                // debugger;
                // 获取编辑器组件对象
                const target = amapUtils.getTarget(editors[key]);
                if (type == 'polygon') {
                    const check = AmapUtils.isTruePolygon(target);
                    const msg = `验证多边形合法结果${check}`
                    console.log(msg)
                    alert(msg)
                    check && editors[key].close()
                } else {
                    editors[key].close()
                }

            }
        })
    })

    document.querySelector('#edit').addEventListener('click', () => {
        Object.keys(editors).forEach(key => {
            let type = getSelectVal()
            if (editors[key]) {
                // debugger;
                editors[key].open()
            }
        })
    })

    document.querySelector('#clear').addEventListener('click', () => {
        map.clearMap();
        Object.keys(editors).forEach(key => {
            editors[key] && editors[key].close()
            // 重置为空对象
            editors[key] = null;
        })
    })


    const locationEl = document.querySelector('#location')

    locationEl.addEventListener('click', () => {
        // const res= await amapUtils.getLocation()
        locationEl.textContent = '定位中...'
        amapUtils.getLocation({
            onComplete(res) {
                console.log('onComplete', res)
                locationEl.textContent = '定位'
                alert(`定位成功! ${JSON.stringify(res)}`)

                // 创建一个 Marker 实例：
                var marker = new amapUtils.AMap.Marker({
                    position: [res.position.lng, res.position.lat],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                });

                amapUtils.addToMap([marker]);
            },
            onError(res) {
                console.log('onError', res)
                locationEl.textContent = '定位'
                alert(`定位失败! ${JSON.stringify(res)}`)
            }
        });
    })

    // const mrOpen = document.querySelector('#mrOpen')
    // let railUtils;
    // mrOpen.addEventListener('click', async () => {
    //     const type = getSelectVal()
    //     railUtils = await amapUtils.drawMobileRail(type, {
    //     });

    // })

    const mrSelectPoint = document.querySelector('#mrSelectPoint')
    mrSelectPoint.addEventListener('click', async () => {
        railUtils.addPoint();
    })

    let trackUtils;
    document.querySelector('#trackInit').addEventListener('click', async () => {
        await amapUtils.initMap('map', {
            resizeEnable: true,
            pitchEnable: true,
            zoom: 17,
            pitch: 15,
            rotation: 45,
            viewMode: '3D', //开启3D视图,默认为关闭
            zooms: [2, 20]
        })
        trackUtils = await amapUtils.track({
            lineArr: [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]],
            markerOpts: {
                position: [116.478935, 39.997761],
                icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
                offset: new amapUtils.AMap.Pixel(-13, -26)
            },
            moveAlongOpts: {
                duration: 400
            }
        });
    })

    document.querySelector('#trackStart').addEventListener('click', async () => {
        trackUtils.startAnimation();
    })

}

init()



